import React, { Component } from 'react';
import { List,Toast } from 'antd-mobile';
import DeviceStoryItem from '../components/DeviceStoryItem';
import IconSettings from '../images/settings.png';
import '../css/nas.css';
import PubSub from 'pubsub-js';

import {
    getBindDevice,
    saveDeviceInfo,
    getFavoriteCount,
    getCategoryCount,
} from '../utils';

/**
 * 我的故事机
 */
class MyDeviceStory extends Component {

    constructor(props, context) {
        super(props, context);
        const storeList = JSON.parse(localStorage.getItem('store_list'));
        const avatar = localStorage.getItem('avatar') || '';
        this.state = {
            storeList: storeList,
            avatar: avatar
        }
    }
    componentDidMount() {
        getBindDevice((result) => {
            if (!result.data || !result.data.device_sn) {
                this.props.history.replace({
                    pathname: '/not_bind',
                });
                return;
            }
            saveDeviceInfo(result.data || {});
            const { device_sn, device_id } = result.data;
            this.setState({
                device_id: device_id,
                device_sn: device_sn
            });
            PubSub.publish('showTips', true);
            // 获取对应的类别个数
            this.getStoreCount();
        });
    }

    async getStoreCount(){
        let storeList = this.state.storeList;
        const result = await getFavoriteCount();
        if (result.errcode === 0) {
           Object.assign(storeList[0],{count:result.data});
        }
        const data = await getCategoryCount();
        if (data.errcode === 0) {
            for (let i = 0; i < data.data.length; i++) {
                const category = data.data[i];
                for (let j = 0; j < storeList.length; j++) {
                    if (storeList[j].category_id === category.category_id) {
                        Object.assign(storeList[j],{count:category.count});
                        break;
                    }
                }
            }
        }
        this.setState({
            storeList:storeList
        });
    }

    handleSettingsClick() {
        this.props.history.push({
            pathname: '/settings',
        });
    }

    handleItemClick(index) {
        const category = this.state.storeList[index];
        if (!category.count || category.count === 0) {
            Toast.show('还未收藏该类别的音频',1,false);
            return;
        }
        if (index === 0) {
            this.props.history.push({
                pathname: '/myfavorite',
                category:category
            });
            return;
        }
        this.props.history.push({
            pathname: '/mystore',
            category:category
        });
    }


    render() {
        return (
            <div style={{ width: '100%', height: '100%', position: 'absolute' }}>
                <div className="container-bg" style={{ backgroundImage: `url(${this.state.avatar})`, width: '100%', height: '128px' }} />
                <div style={{ width: '100%', height: '164px', zIndex: 2, position: 'absolute', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <img src={this.state.avatar} style={{ width: '64px', height: '64px', borderRadius: '5px' }} alt='' />
                </div>
                <div style={{ zIndex: 3, position: 'absolute', display: 'flex', height: "48px", width: '100%' }}>
                    <div style={{ width: "100%" }} />
                    <img src={IconSettings} alt="" style={{ width: '24px', height: '24px', marginRight: 10, marginTop: 12 }}
                        onClick={this.handleSettingsClick.bind(this)} />
                </div>
                <div style={{ width: '100%', marginTop: '164px', zIndex: 2, position: 'absolute', paddingBottom: "64px" }}>
                    <List>
                        {
                            this.state.storeList.map(
                                (item, index) =>
                                    <DeviceStoryItem
                                        key={index}
                                        index={index}
                                        item={item}
                                        itemClick={this.handleItemClick.bind(this, index)} />
                            )
                        }
                    </List>
                </div>
            </div>
        );
    }
}

export default MyDeviceStory;